<template>
	<view class="orderDetails">
		<headTop>
			<uv-navbar title="订单详情" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="list">
			<view class="list-top">
				<view>{{ orderData.order_no }}</view>
				<view>已完成{{ orderData.status }}</view>
			</view>
			<view class="list-info">
				<uv-row>
					<uv-col span="3">
						<uv-image
							:src="orderData.product_image ? orderData.product_image : '/static/images/default.png'"
							width="18vw" height="18vw" radius="2vw">
							<template v-slot:error>
								<uv-image src="/static/images/default.png" width="18vw" height="18vw"
									radius="2vw"></uv-image>
							</template>
						</uv-image>
					</uv-col>
					<uv-col span="9">
						<view class="list-title">{{ orderData.product_name }}</view>
						<view class="list-details">创建时间: {{ orderData.created_at }}</view>
						<view class="list-time">完成时间: {{ orderData.updated_at }}</view>
						<view>
							<text class="list-details">共1件商品 合计:</text>
							<text :style="{ color: getTheme.themeColor }">¥{{ orderData.total_price }}</text>
						</view>
					</uv-col>
				</uv-row>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import headTop from "@/components/headTop/index.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	import { onLoad } from "@dcloudio/uni-app";

	onLoad((options) => {
		getList(options.order_no);
	});

	/* ---------------------------------------------------获取数据------------------------------------------------- */
	import { orderApi } from "@/api/index";
	const orderData = ref();
	const getList = async (order_no : any) => {
		try {
			const res = await orderApi.getdetail({ order_no: order_no });
			orderData.value = res.data;
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};

	/* ---------------------------------------------------跳转上一页------------------------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style lang="scss">
	.orderDetails {
		min-height: 100vw;
		background-repeat: no-repeat;

		.list {
			background-color: rgba(255, 255, 255, 0.6);
			border-radius: 2vw;
			margin-top: 1.5vw;
			padding: 2vw 3vw;

			.list-top {
				padding-bottom: 2vw;
				display: flex;
				justify-content: space-between;
				color: #999999;
				font-size: 26rpx;
				border-bottom: 1px solid #ddd;
			}

			.list-info {
				margin-top: 1.5vw;

				.list-title {
					font-weight: 500;
					margin-bottom: 1vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.list-details,
				.list-time,
				.list-num {
					font-size: 26rpx;
					color: #999999;
				}

				.list-button {
					line-height: 16vw;
				}
			}
		}
	}
</style>